<template>
  <view class="page">
    <loading />
  </view>
    
    <!-- 吸底工具栏 -->
  <!-- <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
   <button class="toolbar-btn" @click="placeOlder()">确认支付￥2998</button>
   <view style="position: fixed; left: 27rpx;bottom: 120rpx;">
      <checkbox-group>
					<label style="font-size: 24rpx;">
						<checkbox color="rgba(142,84,244,1)" value="cb" checked="true" /><text style="color: rgba(144,147,153,1);">我已阅读并同意 <text style="color: rgba(255,55,71,1); display: inline-block;">《店店有客用户服务协议》</text></text>
					</label>
				</checkbox-group>
    </view>
  </view> -->

  <uni-popup ref="popup">
        <view class="popup">
                <view style="display: flex;">
                  <text style="font-weight: 700;font-size: 40rpx;color: rgb(93,38,189);">限时<text style="font-size: 40rpx;color: rgb(255,55,71);">优惠  </text>    预计节省<text style="font-size: 56rpx;color: rgb(255,55,71);">3000</text><text style="font-size: 28rpx;color: rgb(255,55,71);">元</text></text>
                  <image class="popup-img" src="https://www.diandianyouke.cn:801/ddyk/static/stag/static/img/user_icon_zfbgicon.png"/>
                </view>
            <view class="popup-bottom">
              <view>
                <view class="equity">
                <image style="width: 40rpx;height: 40rpx;margin-right: 8rpx;" src="https://www.diandianyouke.cn:801/ddyk/static/stag/static/img/user_icon_diamond.png"/>
                <text>专享4大权益</text>
                </view>
                <view>
                <view class="equitys" style="margin: 0 18rpx 18rpx 0;">
                    <text class="equitys-text">AI创作视频</text>
                    <text>无限次</text>
                    <image class="bgi" src="https://www.diandianyouke.cn:801/ddyk/static/stag/static/img/user_icon_czspin.png"/>
                </view>
                <view class="equitys">
                    <text class="equitys-text">AI智能素材</text>
                    <text>持续更新</text>
                    <image class="bgi" src="https://www.diandianyouke.cn:801/ddyk/static/stag/static/img/user_icon_znscai.png"/>
                </view>
                <view class="equitys">
                    <text class="equitys-text">专业客服</text>
                    <text>7*12小时为您答疑</text>
                    <image class="bgi" src="https://www.diandianyouke.cn:801/ddyk/static/stag/static/img/user_icon_zykfu.png"/>
                </view>
                <view class="equitys1" style="margin-left: 18rpx;">
                    <text class="equitys-text1">更多功能</text>
                    <text>永久免费</text>
                    <image class="bgi" src="https://www.diandianyouke.cn:801/ddyk/static/stag/static/img/user_icon_gdgneng.png"/>
                </view>
                </view>
              </view>
              <checkbox-group @change="checkedBox" style="margin-top: 90rpx;">
		    			<label style="font-size: 24rpx;display: flex;align-items: center;">
		    				<checkbox color="rgba(142,84,244,1)" style="transform:scale(0.75)" value="cb"/><text style="color: rgba(144,147,153,1);">我已阅读并同意 <text style="color: rgba(142,84,244); display: inline-block;">《店店有客用户服务协议》</text></text>
		    			</label>
		    		</checkbox-group>
                <view class="bottom-pay">
                    <view class="time">限时优惠</view>
                    <view class="bottom-price">
                        <text style="font-size: 24rpx;color: #fff;font-weight: 700;margin-left: 32rpx;">￥<text style="font-size: 48rpx;">2980</text>/年<text style="text-decoration: line-through;color: rgba(255,255,255,0.4);margin-left: 8rpx;">￥5980/年</text></text>
                    </view>    
                    <button class="botton" @click="placeOlder()">立即付款</button>
                </view>
            </view>
        </view>
        
    </uni-popup>
</template>

<script>
import loading from '../../components/index/loading.vue';
import { httpRequest } from '../../utils/http';
export default {
  components:{
    loading:loading
  },
    data() {
        return {
            shopName:0,  
            provider:'',
            price:0,
            description:'',
            orderNum:'',
            openId:'',
            signature:'',
            shopId:0,
            businessId:0,
            productId:0,
            checked:''
        };
    },
    onShow() {
      this.$refs.popup.bottom()
    },
   onLoad(options) {
      this.businessId = options.businessId
      this.shopId = options.shopId
      this.getPayInfo()
      this.getOpenId()
      console.log(this.openId);
      setTimeout(() => {
        this.getPerpaySignature()
      }, 1000);
    },
    methods: {
      checkedBox(e){
        this.checked = e.detail.value[0]
      },
      //获取签名
      async getPerpaySignature(){
        const res = await httpRequest('/api/getPerpaySignature','POST',{
          method:'POST',
          url:'https://api.mch.weixin.qq.com/v3/pay/transactions/jsapi',
          body:JSON.stringify({
              appid:'wx92552bbbe59dc59b',
              mchid:'1656084688',
              description:this.description,
              out_trade_no:this.orderNum,
              notify_url:'https://www.diandianyouke.cn:8088/api/orderResult',
              amount:{total:this.price},
              payer:{openid:this.openId}
            })
        })
        console.log(res);
        this.signature = res.data
      },
      //获取openId
      getOpenId(){
        uni.getProvider({
          service:'oauth',
          success: ({ service, provider }) => {
            uni.login({
              provider:provider,
              success: async(res) => {
                console.log(res.code);
                const res1 = await httpRequest('/api/jscode2session','POST',{code:res.code})
                console.log(res1);
                console.log(JSON.parse(res1.data));
                this.openId = JSON.parse(res1.data).openid
                    uni.setStorageSync('openid',JSON.parse(res1.data).openid) 
              },
            })
          },
          fail: (error) => {}
        })
      },
      //获取订单信息
     async getPayInfo(){
        const res = await httpRequest('/api/paymentInfo','POST',{})
        console.log(res);
        this.price = res.data.price
        this.description = res.data.description
        this.orderNum = res.data.orderNum
        this.productId = res.data.productId
      },
      //获取预支付和下单
      placeOlder(){
        if(this.checked!='cb')return uni.showToast({title:'请先勾选协议',icon:'none'})
        uni.request({
            url: 'https://api.mch.weixin.qq.com/v3/pay/transactions/jsapi',
            method: 'POST',
            header: {
            'Authorization': `WECHATPAY2-SHA256-RSA2048 ${this.signature},`,
            'Accept': 'application/json',
            'Content-Type': 'application/json'
            },
            data: JSON.stringify({
              "appid":'wx92552bbbe59dc59b',
              "mchid":'1656084688',
              "description":this.description,
              "out_trade_no":this.orderNum,
              "notify_url":'https://www.diandianyouke.cn:8088/api/orderResult',
              "amount":{"total":this.price},
              "payer":{"openid":this.openId}
            }),
            success:async(res)=>{
              console.log(res);
              const res1 = await httpRequest('/api/getZFPageSignature','POST',{
                appId:'wx92552bbbe59dc59b',
                prepayId:`prepay_id=${res.data.prepay_id}`
              })
              console.log(res1);
              
              uni.requestPayment({
                provider: this.provider,
                orderInfo:{
                  description:this.description,
                  price:this.price,
                  orderNum:this.orderNum
                },
                timeStamp:res1.data.timeStamp.toString(),
                  nonceStr:res1.data.nonceStr,
                  package:`prepay_id=${res.data.prepay_id}`,
                  signType:'RSA',
                  paySign:res1.data.paySign,
                success: async(res2) => {
                  console.log(res2);
                  const res3 = await httpRequest('/api/getOrderInfo','POST',{
                    orderNumber:this.orderNum,
                    shopId:this.shopId,
                    businessId:this.businessId,
                    productId:this.productId
                  })
                  console.log(res3);
                  if(!res3.success) return uni.showToast({
                    title: '支付取消',
                    icon: 'none',
                  })
                  //提示用户
                  uni.showToast({
                    title: '支付成功',
                    icon: 'success',
                    mask: true
                  })
                  //跳转页面
                  uni.reLaunch({ url: '/pages/index/index' })
                },
                fail: (error) => {
                  console.log(error);
                  uni.showToast({
                    title: '支付取消',
                    icon: 'none',
                  })
                }
              })
            }
      });
      },
      onOrderPay(){
        //获取服务提供商
        uni.getProvider({
          service: 'payment',
          success: (res) => {
            console.log(res);
            this.provider = res.provider[0]
            
          },
          fail: (error) => {
            console.log(error);
          }
        })
        this.placeOlder()
      }
    },
    computed:{

    }
};

</script>

<style lang="scss" scoped>
.page{
  position: fixed;
  width: 100%;
  height: 100%;
}
.nianka{
  position: absolute;
  top: 24rpx;
  left: -32rpx;
  width: 821rpx;
  height: 423rpx;

}


/* 吸底工具栏 */
.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--window-bottom));
  z-index: 1;

  background-color: #fff;
  height: 100rpx;
  padding: 0 20rpx;
  border-top: 1rpx solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: content-box;
.toolbar-btn{
  width: 700rpx;
  height: 88rpx;
  background-color: rgba(142,84,244,1);
  text-align: center;
  line-height: 88rpx;
  color: #fff;
  font-size: 32rpx;
}
  .total-pay {
    font-size: 40rpx;
    color: #cf4444;

    .decimal {
      font-size: 75%;
    }
  }
  .button {
    width: 220rpx;
    text-align: center;
    line-height: 72rpx;
    font-size: 26rpx;
    color: #fff;
    border-radius: 72rpx;
    background-color: #0079ff;
  }

  .disabled {
    opacity: 0.6;
  }

}
.popup{
        width: 100%;
        height: 938rpx;
        background:linear-gradient(180deg,rgb(218,196,255)0%,rgb(255,255,255)100%);
        border-radius: 48rpx 48rpx 0 0;
        padding: 24rpx 30rpx;
        box-sizing: border-box;
        .popup-img{
          position: absolute;
          right: 30rpx;
          width: 196rpx;
          height: 156rpx;
        }
        .popup-bottom{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            box-sizing: border-box;
            height: 808rpx;
            background-color: #fff;
            border-radius: 48rpx 48rpx 0 0;
            padding: 30rpx;
            .bottom-text{
                font-size: 36rpx;
                font-weight: 700;
                color: rgb(69,70,74);
                margin-bottom: 30rpx;
            }
.equity{
        display: flex;
        align-items: center;
        font-size: 36rpx;
        font-weight: 700;
        color: rgb(69,70,74);
        margin-bottom: 24rpx;
        border-radius: 12rpx;
    }
    .equitys{
        display: inline-block;
        box-sizing: border-box;
        width: 336rpx;
        height: 188rpx;
        padding: 30rpx 24rpx;
        background:linear-gradient(135deg,rgb(254,245,255)0%,rgb(224,207,255)100%);
        font-size: 26rpx;
        color: rgb(142,84,244);
        position: relative;
        border-radius: 12rpx;
        .equitys-text{
            font-size: 30rpx;
            color: rgb(93,38,189);
            font-weight: 700;
            display: block;
            margin-bottom: 6rpx;
        }
        .bgi{
            position: absolute;
            top: 40rpx;
            right: 0;
            width: 148rpx;
            height: 148rpx;
        }
    }
    .equitys1{
        display: inline-block;
        box-sizing: border-box;
        width: 336rpx;
        height: 188rpx;
        padding: 30rpx 24rpx;
        background:linear-gradient(135deg,rgb(255,249,227)0%,rgb(255,228,122)100%);
        font-size: 26rpx;
        color: rgb(252,160,30);
        position: relative;
        .equitys-text1{
            font-size: 30rpx;
            color: rgb(252,118,0);
            font-weight: 700;
            display: block;
            margin-bottom: 6rpx;
        }
        .bgi{
            position: absolute;
            top: 40rpx;
            right: 0;
            width: 148rpx;
            height: 148rpx;
        }
    }
    .bottom-pay{
                position: relative;
                width: 690rpx;
                height: 98rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-color: rgb(48,48,48);
                border-radius: 16rpx;
                margin-top: 30rpx;
                .time{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 112rpx;
                        height: 30rpx;
                        border-radius: 16rpx 16rpx 16rpx 0;
                        background-color: rgb(255,55,71);
                        font-size: 20rpx;
                        color: #fff;
                        text-align: center;
                        line-height: 30rpx;
                    }
                .bottom-price{
                    
                    
                }
                .botton{
                        margin: 0;
                        padding: 0;
                        width: 324rpx;
                        height: 86rpx;
                        text-align: center;
                        line-height: 86rpx;
                        background:linear-gradient(90deg,rgba(142,84,244,1)0%,rgba(177,83,245,1)100%);
                        color: #fff;
                        font-size: 32rpx;
                        border-radius: 12rpx;
                        margin-right: 6rpx;
                        
                    }
            }
  }
}
</style>